<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">楼市点评</h1>
		</header>
		<div class="content">
			<img src="static/images/banner.png" alt="" class="img" />
			<div class="type">
				<span>点评信息</span>
			</div>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">性价比</span>
						<div class="mui-media-body">6.75分</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">优点</span>
						<div class="mui-media-body">户型选择空间较大</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">参考价格</span>
						<div class="mui-media-body">住宅12000万/平</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">优惠折扣</span>
						<div class="mui-media-body">尊享9.8折</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">楼盘户型</span>
						<div class="mui-media-body">3室-5室以上</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
					<a href="#">
						<span class="">楼盘地址</span>
						<div class="mui-media-body">城北 龙遡路</div>
					</a>
				</li>
				<li class="mui-table-view-cell tel">
					<div class="mui-media-body"><span class="mui-icon mui-icon-phone"></span>400-955-488 免费电话</div>
				</li>
			</ul>
			<div class="type">
				<span>图片展示</span>
			</div>
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="static/images/lp0.png">
						<div class="mui-media-body">外景图</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="static/images/lp0.png">
						<div class="mui-media-body">效果图</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#"><img class="mui-media-object" src="static/images/lp0.png">
						<div class="mui-media-body">规划图</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="static/images/lp0.png">
						<div class="mui-media-body">交通图</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="local">
			<div class="type">
				<span>周边位置</span>
			</div>
			<div style="padding: 0 10px;" class="header">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" v-on:click="clickTab(0,data.map[0].lng,data.map[0].lat)">
						交通
					</a>
					<a class="mui-control-item" v-on:click="clickTab(1,data.map[0].lng,data.map[0].lat)">
						商业
					</a>
					<a class="mui-control-item" v-on:click="clickTab(2,data.map[0].lng,data.map[0].lat)">
						教育
					</a>
					<a class="mui-control-item" v-on:click="clickTab(3,data.map[0].lng,data.map[0].lat)">
						医院
					</a>
				</div>
			</div>
			<div class="contain" id="allmap" style="height:250px;">
				<!--<div id="item1" class="mui-control-content mui-active">-->
				<!--<img src="../assets/images/wenjuan-banner.png" alt="" />-->
				<!--<span><img src="../assets/images/prompt-star.png" alt="" />数据统计为楼盘周边2公里,地图来自百度地图仅供参考</span>-->
				<!--</div>-->
				<!--<div id="item2" class="mui-control-content">-->
				<!--<img src="../assets/images/banner.png" alt="" />-->
				<!--<span><img src="../assets/images/prompt-star.png" alt="" />数据统计为楼盘周边2公里,地图来自百度地图仅供参考</span>-->
				<!--</div>-->
				<!--<div id="item3" class="mui-control-content">-->
				<!--<img src="../assets/images/wenjuan-banner.png" alt="" />-->
				<!--<span><img src="../assets/images/prompt-star.png" alt="" />数据统计为楼盘周边2公里,地图来自百度地图仅供参考</span>-->
				<!--</div>-->
				<!--<div id="item4" class="mui-control-content">-->
				<!--<img src="../assets/images/banner.png" alt="" />-->
				<!--<span><img src="../assets/images/prompt-star.png" alt="" />数据统计为楼盘周边2公里,地图来自百度地图仅供参考</span>-->
				<!--</div>-->
			</div>
		</div>
		<div class="dongtai">
			<div class="type">
				<span>主力户型</span>
			</div>

			<div class="mui-slider-item">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="item in huXing">
							<a>
								<img :src=item.src>
								<p>{{item.houseShiTing}} {{item.houseArea}}m²</p>
								<p><span>{{item.houseStatus}} </span> {{item.houseAllPrice}}</p>
							</a>
						</div>
					</div>

				</div>
				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev" id="jianTouLeft"></div>
				<div class="swiper-button-next" id="jianTouRight"></div>
			</div>
			<div class="type">
				<span>楼盘简介</span>
			</div>
			<div class="local-center">沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.沪指重新站上3000点,房地产版迎来最佳配置 时点.</div>
		</div>
	</div>
</template>
<script type="text/javascript">
	import Swiper from 'swiper';
	export default {
		data() {
			return {
				create: '',
				data: null,
				title: '',
				label: [],
				starArr: [],
				pinPaiShiLi: [],
				guiHuaJingGuan: [],
				sheQuPeiTao: [],
				wuYeFuWu: [],
				diDuanPeiZhi: [],
				lng: 0,
				lat: 0,
				huXing: []
			}
		},
		created: function() {
			let that = this;
			let ajaxURL = localStorage.getItem('ajaxURL');
			let id = this.$route.query.id;
			let type = this.$route.query.type;

			$.ajax({
				type: 'get',
				url: `${ajaxURL}/houseweb/H5/detailHouse.do`,
				catch: false,
				data: {
					city: localStorage.getItem('city'),
					houseType: type,
					houseId: id
				},

				success: function(res) {
					var data = JSON.parse(res)
					console.log(data.data);
					if(data.data.label === '') {
						that.label = [];
					} else {
						that.label = data.data.label[0].tagLabel.split(',');
					}
					that.data = data.data;
					that.huXing = data.data.huXing;
					that.starArr = that.hasStar(data.data.houseCore);
					that.pinPaiShiLi = that.hasStar(data.data.xingJiaBiCore.pinPaiShiLi);
					that.guiHuaJingGuan = that.hasStar(data.data.xingJiaBiCore.sheQuGuiHuaYuJingGuan);
					that.sheQuPeiTao = that.hasStar(data.data.xingJiaBiCore.sheQuPeiTao);
					that.wuYeFuWu = that.hasStar(data.data.xingJiaBiCore.wuYeFuWu);
					that.diDuanPeiZhi = that.hasStar(data.data.xingJiaBiCore.diDuanPeiTao);
					that.lng += data.data.map[0].lng;
					that.lat += data.data.map[0].lat;
					that.creater(that.lng, that.lat, '交通');
//					that.echartser(data.data.fangJiaZouShi.fangJiaZouShiMonth, data.data.fangJiaZouShi.fangJiaZouShiPrice);
				}
			});

		},
		mounted: function() {

			new Swiper('.swiper-container', {
				// loop: true,
				// 如果需要前进后退按钮
				nextButton: '.swiper-button-next',
				prevButton: '.swiper-button-prev',
				slidesPerView: 3,
			});

			let that = this;
			let type = this.$route.query.type;

			if(type === 'new') {
				that.title = '楼盘详情';
			} else if(type === 'xiaoQu') {
				that.title = '小区详情';
			}

		},
		mounted: function() {

		},
		methods:{
			back() {
				this.$router.go(-1); //返回上一层
			},
			hasStar: function(houseCore) {
				let star = [];
				let str = houseCore / 20;
				for(let i = 0; i < Math.floor(str); i++) {
					star.push('static/images/red-star.png');
				}
				if(str - Math.floor(str) >= 0.75) {
					star.push('static/images/red-star.png');
				} else if(str - Math.floor(str) >= 0.25) {
					star.push('static/images/half-red-star.png');
				} else if(str != 5) {
					star.push('static/images/prompt-star.png');
				}
				if(Math.floor(str) < 5) {
					for(let i = 4; i > Math.floor(str); i--) {
						star.push('static/images/prompt-star.png');
					}
				}
				return star;
			},
			creater: function(lng, lat, type) {
				var map = new BMap.Map("allmap"); // 创建Map实例
				var mPoint = new BMap.Point(lng, lat);
				map.enableScrollWheelZoom();
				map.centerAndZoom(mPoint, 15);
				map.enableDragging();

				var top_right_navigation = new BMap.NavigationControl({
					anchor: BMAP_ANCHOR_TOP_RIGHT,
					type: BMAP_NAVIGATION_CONTROL_SMALL
				}); //右上角，仅包含平移和缩放按钮

				map.addControl(top_right_navigation);

				var circle = new BMap.Circle(mPoint, 1500, {
					fillColor: "white",
					strokeWeight: 1,
					fillOpacity: 0.4,
					strokeOpacity: 0.3
				});
				map.addOverlay(circle);
				var local = new BMap.LocalSearch(map, {
					renderOptions: {
						map: map,
						autoViewport: false
					}
				});
				local.searchNearby(type, mPoint, 1000);
				var myIcon = new BMap.Icon("static/images/position.png", new BMap.Size(24, 30));
				var marker = new BMap.Marker(mPoint, {
					icon: myIcon
				}); // 创建标注
				map.addOverlay(marker); // 将标注添加到地图中
				marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			},
			clickTab: function(x, lng, lat) {
				$('#segmentedControl a').eq(x).addClass('mui-active').siblings('a').removeClass('mui-active');
				// $('.contain div').eq(x).addClass('mui-active').siblings('div').removeClass('mui-active');

				if(x === 0) {
					this.creater(lng, lat, '交通');
				}
				if(x === 1) {
					this.creater(lng, lat, '商业');
				}
				if(x === 2) {
					this.creater(lng, lat, '教育');
				}
				if(x === 3) {
					this.creater(lng, lat, '医院');
				}
			}
		}
	}
</script>
<style scoped>
	.mui-bar-nav {
		position: fixed;
		top: 0;
		height: 50px;
		background-color: #0186c2;
	}
	
	.mui-bar-nav a {
		color: #fff;
	}
	
	.mui-bar-nav.mui-bar .mui-icon {
		padding-top: 12px;
	}
	
	.mui-bar .mui-title {
		line-height: 50px;
	}
	
	.mui-tab-item1 {
		display: table-cell;
		overflow: hidden;
		width: 1%;
		height: 50px;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #929292;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon {
		top: 3px;
		width: 24px;
		height: 24px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.mui-bar-tab .mui-tab-item1 .mui-icon~.mui-tab-label {
		font-size: 11px;
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.content {
		padding-top: 50px;
		padding-bottom: 10px;
		background-color: #fff;
		overflow: hidden;
	}
	
	.content .img {
		width: 100%;
	}
	
	.content img {
		width: 15px;
	}
	
	.type {
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		font-weight: bold;
	}
	
	.mui-grid-view.mui-grid-9 {
		background-color: #fff;
		border: 0;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: 0;
		padding: 0;
		font-size: 14px;
	}
	
	.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
		color: #f60;
		font-size: 14px;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell>a:not(.mui-btn) {
		padding: 0;
	}
	
	.year {
		font-size: 14px;
		padding-left: 15px;
		color: #0186c2;
	}
	
	.year .zijian {
		color: #fe6638;
		margin-left: 20px;
	}
	
	.con {
		list-style: none;
		padding: 0 15px;
		font-size: 14px;
		margin: 0;
	}
	
	.con li {
		width: 100%;
		float: left;
		color: #ACACB4;
		padding: 5px 0;
	}
	
	.con li span {
		color: #000;
		margin-left: 6px;
	}
	
	.content .xingxi {
		font-size: 14px;
		line-height: 34px;
		width: 90%;
		padding: 0;
		margin: 0 15px;
	}
	
	.local,
	.dongtai {
		margin-top: 10px;
		background-color: #fff;
	}
	.dongtai img {
			height: 100px;
			width: 100px;
	}
	.mui-segmented-control .mui-control-item {
		color: #000;
		border-color: #fff;
	}
	
	.mui-segmented-control {
		border-color: #fff;
		width: 60%;
		margin: 0 20%;
	}
	
	.mui-segmented-control .mui-control-item.mui-active {
		background: #fff;
		color: #0186c2;
	}
	
	.mui-segmented-control .mui-control-item {
		line-height: 30px;
	}
	
	.mui-control-content>img {
		width: 100%;
	}
	
	.mui-control-content span {
		padding-left: 15px;
		font-size: 12px;
		color: #777;
	}
	
	.mui-control-content span img {
		width: 13px;
	}
	
	.chart {
		height: 200px;
	}
	
	.mui-content-padded {
		margin: 0 10px;
	}
	
	#slider {
		margin-bottom: 100px;
	}
	
	#slider .mui-slider-item a {
		float: left;
		display: inline-block;
		width: 30%;
		margin: 0 1.5%;
		height: 150px;
	}
	
	#slider img {
		width: 100%;
		margin-bottom: 10px;
	}
	
	#slider p {
		line-height: 14px;
		font-size: 12px;
	}
	
	#slider p span {
		background-color: #f60;
		color: #fff;
		padding: 2px 10px;
		border-radius: 5px;
		margin-right: 10px;
	}
	
	.mui-preview-image.mui-fullscreen {
		position: fixed;
		z-index: 20;
		background-color: #000;
	}
	
	.mui-preview-header,
	.mui-preview-footer {
		position: absolute;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	
	.mui-preview-header {
		height: 44px;
		bottom: 0;
	}
	
	.mui-preview-footer {
		height: 50px;
		bottom: 0px;
	}
	
	.mui-preview-header .mui-preview-indicator {
		display: block;
		line-height: 25px;
		color: #fff;
		text-align: center;
		margin: 15px auto 4;
		background-color: rgba(0, 0, 0, 0.4);
		border-radius: 12px;
		font-size: 16px;
	}
	
	.mui-preview-image {
		display: none;
		-webkit-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	
	.mui-preview-image.mui-preview-in {
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
	}
	
	.mui-preview-image.mui-preview-out {
		background: none;
		-webkit-animation-name: fadeOut;
		animation-name: fadeOut;
	}
	
	.mui-preview-image.mui-preview-out .mui-preview-header,
	.mui-preview-image.mui-preview-out .mui-preview-footer {
		display: none;
	}
	
	.mui-zoom-scroller {
		position: absolute;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		-webkit-backface-visibility: hidden;
	}
	
	.mui-zoom {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	
	.mui-slider .mui-slider-group .mui-slider-item img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}
	
	.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
		width: 100%;
	}
	
	.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
		display: inline-table;
	}
	
	.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
		display: table-cell;
		vertical-align: middle;
	}
	
	.mui-preview-loading {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		display: none;
	}
	
	.mui-preview-loading.mui-active {
		display: block;
	}
	
	.mui-preview-loading .mui-spinner-white {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -25px;
		margin-top: -25px;
		height: 50px;
		width: 50px;
	}
	
	.mui-preview-image img.mui-transitioning {
		-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
		transition: transform 0.5s ease, opacity 0.5s ease;
	}
	
	@-webkit-keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	
	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	
	@-webkit-keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	
	@keyframes fadeOut {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	
	.local-center {
		font-size: 12px;
		color: #777;
		text-indent: 2em;
		padding: 0 15px;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell.tel {
		width: 100%;
	}
	
	.mui-grid-view.mui-grid-9 .mui-table-view-cell.tel .mui-media-body {
		/*display: inline-block;*/
		width: 60%;
		line-height: 32px;
		height: 32px;
		margin: 10px auto;
		margin-top: 20px;
		text-align: center;
		color: #fff;
		font-size: 16px;
		background-color: green;
	}
</style>